<template>
    <div>
        <div class="userInfo">
            <div class="topBox">
                <div class="topTitle">
                    <img src="../../../assets/image/zxl/icon9.png" style="width: 21px;height: 23px;margin-right: 4px;">
                    <span>社保信息</span>
                </div>
                <div class="topBtn" @click="openHandle1">
                    <div class="topBtnItem">
                        登记
                    </div>
                </div>
            </div>
            <el-form ref="ruleFormRef" :inline="true" label-position="right" label-width="150px" :model="user"
                :rules="rules" class="form-inline">
                <el-form-item class="formItem" label="参保状态：">
                    <span v-if="user.insured_status == 1">正常参保</span>
                    <span v-if="user.insured_status == 2">已停保</span>
                    <span v-if="user.insured_status == 3">异常参保</span>
                </el-form-item>
                <el-form-item class="formItem" label="最近参保时间：">
                    <span>{{ user.insured_time }}</span>
                </el-form-item>
                <el-form-item class="formItem" label="最近停保时间：">
                    <span>{{ user.insured_stop_time }}</span>
                </el-form-item>
                <el-form-item class="formItem1" label="最近登记时间：">
                    <span>{{ user.insured_handle_time }}</span>
                </el-form-item>
            </el-form>
        </div>
        <div class="userInfo">
            <div class="topBox">
                <div class="topTitle">
                    <img src="../../../assets/image/zxl/icon10.png" style="width: 21px;height: 23px;margin-right: 4px;">
                    <span>公积金信息</span>
                </div>
                <div class="topBtn" @click="openHandle2">
                    <div class="topBtnItem">
                        登记
                    </div>
                </div>
            </div>
            <el-form ref="ruleFormRef" :inline="true" label-position="right" label-width="150px" :model="user"
                :rules="rules" class="form-inline">
                <el-form-item class="formItem" label="个人客户号/账号：">
                    <span>{{ user.fund_account }}</span>
                </el-form-item>
                <el-form-item class="formItem" label="存缴状态：">
                    <span v-if="user.fund_status == 0">未存缴</span>
                    <span v-if="user.fund_status == 1">正常存缴</span>
                    <span v-if="user.fund_status == 2">已停缴</span>
                    <span v-if="user.fund_status == 3">异常存缴</span>
                </el-form-item>
                <el-form-item class="formItem" label="最近存缴时间：">
                    <span>{{ user.fund_time }}</span>
                </el-form-item>
                <el-form-item class="formItem1" label="最近停缴时间：">
                    <span>{{ user.fund_stop_time }}</span>
                </el-form-item>
                <el-form-item class="formItem1" label="最近登记时间：">
                    <span>{{ user.fund_handle_time }}</span>
                </el-form-item>
            </el-form>
        </div>
        <div class="userInfo">
            <div class="topBox">
                <div class="topTitle">
                    <img src="../../../assets/image/zxl/icon7.png" style="width: 18px;height: 16px;margin-right: 4px;">
                    <span>调岗调薪</span>
                </div>
            </div>
            <div class="btnBox">
                <div style="flex: 1;">
                    <button :class="htIndex1 == 0 ? 'uploadBtn' : 'uploadBtn1'" style="margin-right: 24px;"
                        @click="setListOnline1">
                        线上合同
                    </button>
                    <button :class="htIndex1 == 1 ? 'uploadBtn' : 'uploadBtn1'" @click="setListOffline1">
                        线下合同
                    </button>
                </div>
                <button class="topBtnItem1" @click="open2 = true">
                    上传合同
                </button>
            </div>
            <div style="margin-left: 28px;" v-if="htIndex1 == 0">
                <el-table :data="tableData" height="250" class="custom-table" style="width: 100%;">
                    <el-table-column prop="task_name" label="合同名称" align="center" />
                    <el-table-column prop="type" label="合同类型" align="center">
                        <template #default="{ row }">
                            <span>调岗调薪</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sign_time" label="签署时间" align="center" />
                    <el-table-column fixed="right" label="操作" align="center">
                        <template #default="{ row }">
                            <el-button link type="primary" size="large" @click.stop="lookFile1(row)">
                                查看
                            </el-button>
                            <el-button link type="primary" size="large" @click.stop="downloadFile1(row)">
                                下载
                            </el-button>
                        </template>
                    </el-table-column>
                    <template #empty>
                        <img src="../../..//assets/image/zxl/noData.png" width="94" style="width: 94px;height: 86px;" />
                    </template>
                </el-table>
                <!-- <Pagination style="justify-content: end;" :total="total" :current-page="pageInfo.page"
                    :page-size="pageInfo.limit" @pagination-change="handlePaginationChange" /> -->
            </div>
            <div style="margin-left: 28px;" v-if="htIndex1 == 1">
                <el-table :data="tableData" height="250" class="custom-table" style="width: 100%;">
                    <el-table-column prop="filename" label="合同名称" align="center" />
                    <el-table-column prop="type" label="合同类型" align="center">
                        <template #default="{ row }">
                            <span>{{ row.type == 4 ? '调岗调薪' : '' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="上传时间" align="center" />
                    <el-table-column fixed="right" label="操作" align="center">
                        <template #default="{ row }">
                            <el-button link type="primary" size="large" @click.stop="downloadFile(row)">
                                下载
                            </el-button>
                            <el-button link type="primary" size="large" @click.stop="deleteFiles(row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                    <template #empty>
                        <img src="../../..//assets/image/zxl/noData.png" width="94" style="width: 94px;height: 86px;" />
                    </template>
                </el-table>
                <!-- <Pagination style="justify-content: end;" :total="total" :current-page="pageInfo.page"
                    :page-size="pageInfo.limit" @pagination-change="handlePaginationChange" /> -->
            </div>
        </div>
        <div class="userInfo" style="border-bottom: 0px solid #eaeaea;">
            <div class="topBox">
                <div class="topTitle">
                    <img src="../../../assets/image/zxl/icon7.png" style="width: 18px;height: 20px;margin-right: 4px;">
                    <span>规章制度</span>
                </div>
            </div>
            <div class="btnBox">
                <div style="flex: 1;">
                    <button :class="htIndex2 == 0 ? 'uploadBtn' : 'uploadBtn1'" style="margin-right: 24px;"
                        @click="setListOnline2">
                        线上合同
                    </button>
                    <button :class="htIndex2 == 1 ? 'uploadBtn' : 'uploadBtn1'" @click="setListOffline2">
                        线下合同
                    </button>
                </div>
                <button class="topBtnItem1" @click="open3 = true">
                    上传合同
                </button>
            </div>
            <div style="margin-left: 28px;" v-if="htIndex2 == 0">
                <el-table :data="tableData1" height="250" class="custom-table" style="width: 100%;">
                    <el-table-column prop="task_name" label="合同名称" align="center" />
                    <el-table-column prop="type" label="合同类型" align="center">
                        <template #default="{ row }">
                            <span>规章制度</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sign_time" label="签署时间" align="center" />
                    <el-table-column fixed="right" label="操作" align="center">
                        <template #default="{ row }">
                            <el-button link type="primary" size="large" @click.stop="lookFile1(row)">
                                查看
                            </el-button>
                            <el-button link type="primary" size="large" @click.stop="downloadFile1(row)">
                                下载
                            </el-button>
                        </template>
                    </el-table-column>
                    <template #empty>
                        <img src="../../..//assets/image/zxl/noData.png" width="94" style="width: 94px;height: 86px;" />
                    </template>
                </el-table>
                <!-- <Pagination style="justify-content: end;" :total="total1" :current-page="pageInfo1.page"
                    :page-size="pageInfo1.limit" @pagination-change="handlePaginationChange1" /> -->
            </div>
            <div style="margin-left: 28px;" v-if="htIndex2 == 1">
                <el-table :data="tableData1" height="250" class="custom-table" style="width: 100%;">
                    <el-table-column prop="filename" label="合同名称" align="center" />
                    <el-table-column prop="type" label="合同类型" align="center">
                        <template #default="{ row }">
                            <span>{{ row.type == 1 ? '规章制度' : '' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="上传时间" align="center" />
                    <el-table-column fixed="right" label="操作" align="center">
                        <template #default="{ row }">
                            <el-button link type="primary" size="large" @click.stop="downloadFile(row)">
                                下载
                            </el-button>
                            <el-button link type="primary" size="large" @click.stop="deleteFiles(row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                    <template #empty>
                        <img src="../../..//assets/image/zxl/noData.png" width="94" style="width: 94px;height: 86px;" />
                    </template>
                </el-table>
                <!-- <Pagination style="justify-content: end;" :total="total1" :current-page="pageInfo1.page"
                    :page-size="pageInfo1.limit" @pagination-change="handlePaginationChange1" /> -->
            </div>
        </div>
        <el-dialog v-model="open" title="登记" width="538" :before-close="handleClose">
            <el-form ref="ruleFormRef1" label-position="right" label-width="150px" :model="user" class="form-inline">
                <el-form-item class="" label="员工：">
                    <span>{{ user.name }}</span>
                </el-form-item>
                <el-form-item class="" label="登记类型：">
                    <el-radio-group v-model="user.insured_status">
                        <el-radio :value="1">正常参保</el-radio>
                        <el-radio :value="2">已停保</el-radio>
                        <el-radio :value="3">异常参保</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item class="" label="参保时间：" v-if="user.insured_status == 1">
                    <el-date-picker v-model="user.insured_time" type="date" format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD" placeholder="请选择参保时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item class="" label="停保时间：" v-if="user.insured_status == 2">
                    <el-date-picker v-model="user.insured_stop_time" type="date" format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD" placeholder="请选择停保时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item class="" label="备注：">
                    <el-input v-model="user.insured_desc" style="width: 309px;height: 51px;" :rows="2" type="textarea"
                        placeholder="备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="small" @click="open = false">取消</el-button>
                    <el-button type="primary" color="#01509f" size="small" @click="changeInfo1">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="open1" title="登记" width="538" :before-close="handleClose">
            <el-form ref="ruleFormRef1" label-position="right" label-width="150px" :model="user" class="form-inline">
                <el-form-item class="" label="员工：">
                    <span>{{ user.name }}</span>
                </el-form-item>
                <el-form-item class="" label="个人客户号/账号：">
                    <el-input v-model="user.fund_account" type="text" placeholder="个人客户号/账号" />
                </el-form-item>
                <el-form-item class="" label="存缴状态：">
                    <el-radio-group v-model="user.fund_status">
                        <el-radio :value="1">正常存缴</el-radio>
                        <el-radio :value="2">已停缴</el-radio>
                        <el-radio :value="3">异常存缴</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item class="" label="参缴时间：" v-if="user.fund_status == 1">
                    <el-date-picker v-model="user.fund_time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
                        placeholder="请选择参缴时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item class="" label="停缴时间：" v-if="user.fund_status == 2">
                    <el-date-picker v-model="user.fund_stop_time" type="date" format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD" placeholder="请选择停缴时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item class="" label="备注：">
                    <el-input v-model="user.fund_desc" style="width: 309px;height: 51px;" :rows="2" type="textarea"
                        placeholder="备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="small" @click="open1 = false">取消</el-button>
                    <el-button type="primary" color="#01509f" size="small" @click="changeInfo2">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="open2" title="调岗调薪上传合同" width="646" :before-close="handleClose">
            <el-form ref="ruleFormRef2" label-position="right" label-width="150px" :model="htForm1" class="form-inline"
                style="display: flex;align-items: center;">
                <el-form-item class="formItem2" label="选择上传文件：" height="160">
                    <el-upload ref="uploadBox1" class="upload-demo" drag name="file" :auto-upload="false"
                        :data="{ id: user.id, type: 4 }" :headers="{ token: token }"
                        action="https://demo-api.niuyuwang.com/hr/user/save_file" :on-success="uploadFileSuccess1"
                        :on-error="uploadFileFail1" :before-upload="beforeAvatarUpload">
                        <img src="../../../assets/image/zxl/icon14.png" style="width: 32px;height: 32px;">
                        <div class="tip1">点击或拖拽上传</div>
                        <div class="tip2">文件格式：".xls", ".xlsx", ".doc", ".docx", ".pdf", ".zip", ".txt"</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="small" @click="open2 = false">取消</el-button>
                    <el-button type="primary" color="#01509f" size="small" @click="uploadFile1">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="open3" title="规章制度上传合同" width="646" :before-close="handleClose">
            <el-form ref="ruleFormRef3" label-position="right" label-width="150px" :model="htForm2" class="form-inline"
                style="display: flex;align-items: center;">
                <el-form-item class="formItem2" label="选择上传文件：" height="160">
                    <el-upload ref="uploadBox2" class="upload-demo" drag name="file" :auto-upload="false"
                        :data="{ id: user.id, type: 1 }" :headers="{ token: token }"
                        action="https://demo-api.niuyuwang.com/hr/user/save_file" :on-success="uploadFileSuccess2"
                        :on-error="uploadFileFail2" :before-upload="beforeAvatarUpload">
                        <img src="../../../assets/image/zxl/icon14.png" style="width: 32px;height: 32px;">
                        <div class="tip1">点击或拖拽上传</div>
                        <div class="tip2">文件格式：".xls", ".xlsx", ".doc", ".docx", ".pdf", ".zip", ".txt"</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="small" @click="open3 = false">取消</el-button>
                    <el-button type="primary" color="#01509f" size="small" @click="uploadFile2">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, defineEmits } from '@/TUIKit/adapter-vue';
import type { FormInstance, FormRules, ElMessage, ElMessageBox, UploadProps } from 'element-plus'
import { insured_handle, fund_handle, getFileList, getOnlineFileList, deleteFile } from "@/api/xl";
const props = defineProps({
    user: {
        type: Object,
        default: () => ({}) // 对象/数组默认值需返回函数
    }
})
onMounted(() => {
    console.log(props.user)
    setTimeout(() => {
        getList1()
        getList2()
    }, 1000)
});
interface RuleForm {
    status: number
    time: string
    time1: string
    time2: string
    card_no: string
    status1: number
    time3: string
    time4: string
    time5: string

}

const htIndex1 = ref(0)
const htIndex2 = ref(0)
const emits = defineEmits(['updateData']);
const open = ref(false)
const open1 = ref(false)
const open2 = ref(false)
const open3 = ref(false)
const ruleFormRef = ref<FormInstance>()
const ruleFormRef1 = ref<FormInstance>()
const ruleFormRef2 = ref<FormInstance>()
const ruleFormRef3 = ref<FormInstance>()
const uploadBox1 = ref(null)
const uploadBox2 = ref(null)
const token = localStorage.getItem('token')
const htForm1 = ref(null)
const htForm2 = ref(null)
const form = reactive<RuleForm>({
    status: 0,
    time: '2025-05-01',
    time1: '2025-04-30',
    time2: '2025-05-09',
    card_no: '6226302823323009091',
    status1: 0,
    time3: '2025-05-09',
    time4: '2025-05-09',
    time5: '2025-05-09',
})

const tableData = ref([])
const tableData1 = ref([])
const total = ref(100)
const pageInfo = reactive({
    page: 2,
    limit: 10
})
const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
    pageInfo.page = page
    pageInfo.limit = size
}
const total1 = ref(100)
const pageInfo1 = reactive({
    page: 2,
    limit: 10
})
const handlePaginationChange1 = ({ page, size }: { page: number; size: number }) => {
    pageInfo1.page = page
    pageInfo1.limit = size
}

const rules = reactive<FormRules<RuleForm>>({

})

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    console.log(rawFile)
    if (rawFile.type !== 'application/vnd.ms-excel' && rawFile.type !== 'application/x-zip-compressed' && rawFile.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && rawFile.type !== 'text/plain' && rawFile.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' && rawFile.type !== 'application/msword' && rawFile.type !== 'application/pdf' && rawFile.type !== 'application/zip') {
        ElMessage.error('文件格式：".xls", ".xlsx", ".doc", ".docx", ".pdf", ".zip", ".txt"')
        return false
    }
    return true
}

const uploadFile1 = () => {
    uploadBox1.value!.submit();
}
const uploadFileSuccess1 = () => {
    ElMessage({
        message: '上传成功',
        grouping: true,
        type: "success",
    });
    uploadBox1.value!.clearFiles()
    open2.value = false;
    setTimeout(() => {
        getList1()
    }, 500)
}
const uploadFileFail1 = () => {
    ElMessage({
        message: '上传失败',
        grouping: true,
        type: "success",
    });
    uploadBox1.value!.clearFiles()
    open2.value = false;
    setTimeout(() => {
        getList1()
    }, 500)
}

const uploadFile2 = () => {
    uploadBox2.value!.submit();
}
const uploadFileSuccess2 = () => {
    ElMessage({
        message: '上传成功',
        grouping: true,
        type: "success",
    });
    uploadBox2.value!.clearFiles()
    open3.value = false;
    setTimeout(() => {
        getList2()
    }, 500)
}
const uploadFileFail2 = () => {
    ElMessage({
        message: '上传失败',
        grouping: true,
        type: "success",
    });
    uploadBox2.value!.clearFiles()
    open3.value = false;
    setTimeout(() => {
        getList2()
    }, 500)
}

const setListOnline1 = () => {
    htIndex1.value = 0;
    getList1()
}

const setListOffline1 = () => {
    htIndex1.value = 1;
    getList1()
}

const setListOnline2 = () => {
    htIndex2.value = 0;
    getList2()
}

const setListOffline2 = () => {
    htIndex2.value = 1;
    getList2()
}

const getList1 = () => {
    if (htIndex1.value == 0) {
        getOnlineFileList({
            id: props.user.id,
            type: 4
        }).then(res => {
            tableData.value = res.data
        });
    } else if (htIndex1.value == 1) {
        getFileList({
            id: props.user.id,
            type: 4
        }).then(res => {
            tableData.value = res.data
        });
    }
}
const getList2 = () => {
    if (htIndex2.value == 0) {
        getOnlineFileList({
            id: props.user.id,
            type: 3
        }).then(res => {
            tableData1.value = res.data
        });
    } else if (htIndex2.value == 1) {
        getFileList({
            id: props.user.id,
            type: 1
        }).then(res => {
            tableData1.value = res.data
        });
    }
}
const downloadFile = (row) => {
    const url = row.url; // 替换为实际文件 URL
    const a = document.createElement('a');
    a.href = url;
    a.download = row.filename; // 自定义下载文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
const downloadFile1 = (row) => {
    const url = row.downloadUrl; // 替换为实际文件 URL
    const a = document.createElement('a');
    a.href = url;
    a.download = row.filename; // 自定义下载文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
const lookFile1 = (row) => {
    if(row.previewUrl){
        window.open(row.previewUrl, "_blank");
    }
}
const deleteFiles = (row) => {
    ElMessageBox.confirm("是否确定删除?", "操作提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass: "ExitConfirmButton",
    }).then((action: Action) => {
        if (action === "confirm") {
            deleteFile({
                id: row.id
            }).then(res => {
                ElMessage({
                    message: res.msg,
                    grouping: true,
                    type: "success",
                });
                getList1()
                getList2()
            });
        }
    });
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const handleClose = (done: () => void) => {
    done()
}

const openHandle1 = () => {
    if (!props.user.insured_status) {
        props.user.insured_status = 3
    }
    open.value = true
}

const openHandle2 = () => {
    if (!props.user.fund_status) {
        props.user.fund_status = 3
    }
    open1.value = true
}

const changeInfo1 = () => {
    if (props.user.job_status == 2 && props.user.insured_status == 2) {
        ElMessageBox.confirm(
            '该员工为正式状态，请确认是否不再为其参保，若未按照约定为其缴纳社保存在法律风险！',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                insured_handle({
                    id: props.user.id,
                    insured_status: props.user.insured_status,
                    insured_time: props.user.insured_time,
                    insured_stop_time: props.user.insured_stop_time,
                    insured_desc: props.user.insured_desc,
                }).then(res => {
                    ElMessage({
                        message: res.msg,
                        grouping: true,
                        type: "success",
                    });
                    open.value = false
                    emits('updateData')
                });
            })
            .catch(() => {

            })
    } else {
        insured_handle({
            id: props.user.id,
            insured_status: props.user.insured_status,
            insured_time: props.user.insured_time,
            insured_stop_time: props.user.insured_stop_time,
            insured_desc: props.user.insured_desc,
        }).then(res => {
            ElMessage({
                message: res.msg,
                grouping: true,
                type: "success",
            });
            open.value = false
            emits('updateData')
        });
    }
}

const changeInfo2 = () => {
    if (props.user.job_status == 2 && props.user.fund_status == 2) {
        ElMessageBox.confirm(
            '该员工为正式状态，请确认是否不再为其存缴，若未按照约定为其存缴存在法律风险！',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                fund_handle({
                    id: props.user.id,
                    fund_status: props.user.fund_status,
                    fund_time: props.user.fund_time,
                    fund_stop_time: props.user.fund_stop_time,
                    fund_desc: props.user.fund_desc,
                    fund_account: props.user.fund_account,
                }).then(res => {
                    ElMessage({
                        message: res.msg,
                        grouping: true,
                        type: "success",
                    });
                    open1.value = false
                    emits('updateData')
                });
            })
            .catch(() => {

            })
    } else {
        fund_handle({
            id: props.user.id,
            fund_status: props.user.fund_status,
            fund_time: props.user.fund_time,
            fund_stop_time: props.user.fund_stop_time,
            fund_desc: props.user.fund_desc,
            fund_account: props.user.fund_account,
        }).then(res => {
            ElMessage({
                message: res.msg,
                grouping: true,
                type: "success",
            });
            open1.value = false
            emits('updateData')
        });
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
    font-size: 16px;
    /* 设置你需要的字体大小 */
}

::v-deep .el-form-item__content * {
    font-size: 16px;
    /* 设置你需要的字体大小 */
}

.upload-demo {
    width: 450px;

    ::v-deep .el-upload-dragger {
        background-color: #f7f7f7;
        width: 458px;
        height: 160px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .el-upload-list {
        width: 450px !important;
    }

    .tip1 {
        color: #666;
        font-size: 14px;
    }

    .tip2 {
        color: #999;
        font-size: 14px;
    }
}

.el-radio__input.is-checked .el-radio__inner {
    border-color: #01509f;
    /* 边框颜色 */
    background: #01509f;
    /* 填充颜色 */
}

/* 修改选中时文字的颜色 */
.el-radio__input.is-checked+.el-radio__label {
    color: #01509f;
}

.userInfo {
    padding: 12px 0 31px 0;
    border-bottom: 1px solid #eaeaea;
    // display: flex;
    // flex-wrap: wrap;

    .form-inline {
        margin-top: 32px;
        // display: flex;
        // flex-wrap: wrap;
        padding: 0 17px;

        .formItem {
            width: 31%;
            margin-bottom: 40px;
        }

        .formItem1 {
            width: 31%;
        }
    }

    .topBox {
        display: flex;
        align-items: center;

        .topTitle {
            display: flex;
            align-items: center;
            flex: 1;
            font-size: 16px;
            color: #01509f;
        }

        // .topBtn:hover {
        //     transform: scale(1) translateY(-2px) !important;
        //     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        // }

        .topBtn {
            display: flex;
            align-items: center;

            .topBtnItem {
                cursor: pointer;
                width: 42px;
                height: 30px;
                color: #01509f;
                border: 1px solid #01509f;
                border-radius: 6px;
                text-align: center;
                line-height: 30px;
                font-size: 14px;
            }

            .topBtnItem1 {
                cursor: pointer;
                background-color: #01509f;
                color: #fff;
                width: 86px;
                height: 30px;
                border: 0px solid #eaeaea;
                font-size: 14px;
                border-radius: 6px;
                text-align: center;
                line-height: 30px;
            }

            .topBtnItem:hover {
                transform: scale(1) translateY(-2px) !important;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }
        }
    }

    .btnBox {
        display: flex;
        align-items: center;
        margin: 19px 0 16px 28px;

        .uploadBtn {
            background-color: transparent;
            color: #01509f;
            width: 100px;
            height: 30px;
            border: 1px solid #01509f;
            border-radius: 6px;
            text-align: center;
            line-height: 30px;
        }

        .uploadBtn1 {
            background-color: transparent;
            color: #999;
            width: 100px;
            height: 30px;
            border: 1px solid #999;
            border-radius: 6px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }

        .topBtnItem1 {
            cursor: pointer;
            background-color: #01509f;
            color: #fff;
            width: 86px;
            height: 30px;
            border: 0px solid #eaeaea;
            font-size: 14px;
            border-radius: 6px;
            text-align: center;
            line-height: 30px;
        }

        .topBtnItem1:hover {
            transform: scale(1) translateY(-2px) !important;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
    }

    .custom-table .el-table__header th {
        color: #666;
        font-size: 16px;
        font-weight: lighter;
    }
}
</style>
